<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <!--<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>-->
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row style="display: flex;flex-wrap: wrap;">
          <el-col :span="12">
            <el-form-item label="隐患名称" prop="htName">
              <el-input v-model="form.htName" placeholder="请输入隐患名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐患等级" prop="level">
              <el-select style="width: 100%;" v-model="form.level" placeholder="请选择隐患等级">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_LEVEL)" :key="dict.value" :label="dict.label"
                           :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐患类别" prop="category">
              <el-select style="width: 100%;" v-model="form.category" placeholder="请选择隐患类别">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_CATEGORY)" :key="dict.value"
                           :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐患来源" prop="source">
              <el-select style="width: 100%;" v-model="form.source" placeholder="请选择隐患来源">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_SOURCE)" :key="dict.value" :label="dict.label"
                           :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐患地点" prop="place">
              <el-input v-model="form.place" placeholder="请输入隐患地点" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查类型" prop="checkType">
              <el-select style="width: 100%;" v-model="form.checkType" placeholder="请选择检查类型">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CHECK_TYPE)" :key="dict.value" :label="dict.label"
                           :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查单位" prop="checkDeptId">
              <treeselect style="width: 100%;" v-model="form.checkDeptId" :options="checkDeptOptions" :show-count="true"
                          placeholder="请选择检查单位" :normalizer="normalizer"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查人" prop="checkPeoId">
              <el-select style="width: 100%;" v-model="form.checkPeoId" placeholder="请选择检查人">
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                           :value="parseInt(item.id)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患产生原因" prop="causeReason">
              <el-input v-model="form.causeReason" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患描述" prop="description">
              <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="所属风险点" prop="riskId">
              <el-select style="width: 100%;" v-model="form.riskId" placeholder="请选择风险点">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="所属单位" prop="beCheckDeptId">
              <treeselect style="width: 100%;" v-model="form.beCheckDeptId" :options="checkDeptOptions"
                          :show-count="true" placeholder="请选择所属单位" :normalizer="normalizer" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="整改方式" prop="rectificationType">
              <el-radio-group v-model="form.rectificationType" @change="changeRadio">
                <el-radio label="0">立即整改</el-radio>
                <el-radio label="1">限期整改</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.rectificationType==1">
            <el-form-item label="下达方式" prop="issueType">
              <el-radio-group v-model="form.issueType" @change="changeIssue">
                <el-radio label="0">快速下达</el-radio>
                <el-radio label="1">进入隐患下达</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12"  v-if="form.rectificationType==1">
            <el-form-item label="隐患下达人" prop="issuePeoId">
              <el-select style="width: 100%;" v-model="form.issuePeoId" placeholder="请选择下达人">
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                           :value="parseInt(item.id)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.rectificationType==1">
            <el-form-item label="整改期限" prop="rectificationLimit">
              <el-date-picker style="width: 100%;" v-model="form.rectificationLimit" type="date" placeholder="选择日期" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <div v-if="form.rectificationType=='0'||form.rectificationType=='1'&&form.issueType=='0'">
            <el-col :span="12">
              <el-form-item label="整改责任单位" prop="rectificationDeptId">
                <treeselect style="width: 100%;" v-model="form.rectificationDeptId" :options="checkDeptOptions"
                            :show-count="true" placeholder="请选择整改责任单位" :normalizer="normalizer" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="整改责任人" prop="rectificationPeoId">
                <el-select style="width: 100%;" v-model="form.rectificationPeoId" placeholder="请选择检查人">
                  <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                             :value="parseInt(item.id)" />
                </el-select>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="12">
            <el-form-item label="验收责任单位" prop="cancelDeptId">
              <treeselect style="width: 100%;" v-model="form.cancelDeptId" :options="checkDeptOptions"
                          :show-count="true" placeholder="请选择验收责任单位" :normalizer="normalizer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验收责任人" prop="cancelPeoId">
              <el-select style="width: 100%;" v-model="form.cancelPeoId" placeholder="请选择检查人">
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                           :value="parseInt(item.id)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="整改前:" prop="ossImg">
              <imageUpload v-model="form.ossImg" />
              <!-- <el-upload class="upload-demo"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed">
                <i class="el-icon-camera-solid" style="font-size: 40px;color:#1890FF;"></i>
              </el-upload> -->
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="附件:" prop="ossFile">
              <fileUpload v-model="form.ossFile" />
              <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed">
                <i class="el-icon-upload" style="font-size: 40px;color:#67C23A;"></i>
              </el-upload> -->
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-form-item label="隐患状态" prop="state">-->
        <!--<el-select v-model="form.state" placeholder="请选择隐患状态">-->
        <!--<el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_STATE)"-->
        <!--:key="dict.value" :label="dict.label" :value="dict.value" />-->
        <!--</el-select>-->
        <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    <!--</el-dialog>-->
  </div>
</template>

<script>
  import {
    createHtHiddentrouble,
    updateHtHiddentrouble,
    deleteHtHiddentrouble,
    getHtHiddentrouble,
    getHtHiddentroublePage,
    exportHtHiddentroubleExcel
  } from "@/api/biz/htHiddentrouble";
  import {
//    updateHtHiddentroublePlan,
    createHtPlanDetailExe
  } from "@/api/biz/htHiddenImplement";
  import ElRow from "element-ui/packages/row/src/row";
  import {
    listSimpleUsers
  } from "@/api/system/user";
  import {
    listSimpleDepts
  } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {getUserProfile} from "@/api/system/user"
  // import {getDictDatas, DICT_TYPE} from '@/utils/dict'
  export default {
    name: "HtHiddentrouble",
    components: {
      ElRow,
      Treeselect
    },

    data() {
      return {
        pickerOptions:{},
        showWay: false,
        showWay1: true,
        showRectification: true,
        radio: '',
        //检查部门
        checkDeptOptions: undefined,
        radio1: '',
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 隐患信息列表
        list: [],
        users: [],
        userId:undefined,
        deptId:undefined,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        dateRangeCheckDate: [],
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          htName: null,
          category: null,
          checkType: null,
          level: null,
          state: null,
          checkPeoId: null,
          beCheckDeptId: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          htName: [{
            required: true,
            message: "隐患名称不能为空",
            trigger: "blur"
          }],
          level: [{
            required: true,
            message: "隐患等级不能为空",
            trigger: "change"
          }],
          category: [{
            required: true,
            message: "隐患类别不能为空",
            trigger: "blur"
          }],
          source: [{
            required: true,
            message: "隐患来源不能为空",
            trigger: "change"
          }],
          ossImg: [{
            required: true,
            message: "整改前不能为空",
            trigger: "change"
          }],
          rectificationDeptId: [{
            required: true,
            message: "整改责任单位不能为空",
            trigger: "change"
          }],
          rectificationPeoId: [{
            required: true,
            message: "整改责任人不能为空",
            trigger: "change"
          }],
          issueType: [{
            required: true,
            message: "下达方式不能为空",
            trigger: "change"
          }],
          place: [{
            required: true,
            message: "隐患地点不能为空",
            trigger: "blur"
          }],
          checkType: [{
            required: true,
            message: "检查类型不能为空",
            trigger: "change"
          }],
          checkDeptId: [{
            required: true,
            message: "检查单位不能为空",
            trigger: "blur"
          }],
          rectificationLimit: [{
            required: true,
            message: "整改期限不能为空",
            trigger: "change"
          }],
          checkPeoId: [{
            required: true,
            message: "检查人不能为空",
            trigger: "change"
          }],
          // riskId: [{
          //   required: true,
          //   message: "所属风险点不能为空",
          //   trigger: "blur"
          // }],
          beCheckDeptId: [{
            required: true,
            message: "所属单位不能为空",
            trigger: "change"
          }],
          rectificationType: [{
            required: true,
            message: "整改方式不能为空",
            trigger: "change"
          }],
          cancelDeptId: [{
            required: true,
            message: "验收责任单位不能为空",
            trigger: "blur"
          }],
          cancelPeoId: [{
            required: true,
            message: "验收责任人不能为空",
            trigger: "change"
          }],
        }
      };
    },
    created() {
      this.form.planId=this.$route.query.planId;
      this.form.planExeId=this.$route.query.planExeId;
      this.form.planDetailId=this.$route.query.planDetailId;

//      this.getList();
      this.getTreeselect()
      this.getUsers();
    },
    methods: {
      getLoginUser(){
        getUserProfile().then(response=>{
          this.userId=response.data.id;
          this.deptId=response.data.dept.id;

          this.form.checkPeoId=this.userId;
          this.form.checkDeptId=this.deptId;
          this.form.beCheckDeptId=this.deptId;
          this.form.cancelPeoId=this.userId;
          this.form.cancelDeptId=this.deptId;
          this.form.issuePeoId=this.userId;
        });
      },
      getUsers(){
        // 获得用户列表
        listSimpleUsers().then(response => {
          this.users = response.data;
        });
      },
      //禁止日期范围
      getdisabled(date) {
        this.pickerOptions= Object.assign({},this.pickerOptions,{
          disabledDate(time){
            return time.getTime() < new Date(date).getTime();  //如果date格式是2020-7-23或者2020/7/23。这里还是需要转成时间戳。把date改成new Date(date).getTime()
          }
        })
      },
      /** 查询部门下拉树结构 + 人员下拉 */
      getTreeselect() {
        listSimpleDepts().then(response => {
          //检查部门
          this.checkDeptOptions = [];
          this.checkDeptOptions.push(...this.handleTree(response.data, "id"));
        });
      },
      // 格式化部门的下拉框
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        // 处理查询参数
        let params = {
          ...this.queryParams
        };
        this.addBeginAndEndTime(params, this.dateRangeCheckDate, 'checkDate');
        // 执行查询
        getHtHiddentroublePage(params).then(response => {
          this.list = response.list;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 取消按钮 */
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 表单重置 */
      reset() {
        this.form = {
          id: undefined,
          htName: undefined,
          checkDate: undefined,
          place: undefined,
          category: undefined,
          checkType: undefined,
          level: undefined,
          state: undefined,
          source: undefined,
          causeReason: undefined,
          description: undefined,
          checkPeoId: undefined,
          checkDeptId: undefined,
          beCheckDeptId: undefined,
          riskId: undefined,
          rectificationLimit: undefined,
          rectificationType: undefined,
          rectificationDeptId: undefined,
          rectificationPeoId: undefined,
          cancelPeoId: undefined,
          cancelDeptId: undefined,
          issueType: undefined,
          issueDate: undefined,
          ossFile: undefined,
          ossImg: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRangeCheckDate = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加隐患信息";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id;
        getHtHiddentrouble(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改隐患信息";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (!valid) {
            return;
          }
          // 添加的提交
          createHtHiddentrouble(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            //隐患登记后，更新排查计划详情的状态
            let form={'id':this.form.planDetailId,'planExeId':this.form.planExeId,'planId':this.form.planId,'riskState':'1'};
            createHtPlanDetailExe(form).then(response => {
              this.$modal.msgSuccess("处理排查项目状态成功");
              //跳转到排查计划执行页面
              this.$router.push({ path: "/htHiddenImplement/index", query: { planExeId:this.form.planExeId,planId: this.form.planId,planDetailId:this.form.planDetailId}})
            });
            });
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const id = row.id;
        this.$modal.confirm('是否确认删除隐患信息编号为"' + id + '"的数据项?').then(function() {
          return deleteHtHiddentrouble(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        // 处理查询参数
        let params = {
          ...this.queryParams
        };
        params.pageNo = undefined;
        params.pageSize = undefined;
        this.addBeginAndEndTime(params, this.dateRangeCheckDate, 'checkDate');
        // 执行导出
        this.$modal.confirm('是否确认导出所有隐患信息数据项?').then(() => {
          this.exportLoading = true;
          return exportHtHiddentroubleExcel(params);
        }).then(response => {
          this.$download.excel(response, '${table.classComment}.xls');
          this.exportLoading = false;
        }).catch(() => {});
      },
      changeRadio(e) { //整改方式
        if (e == 0) {
          this.form.rectificationLimit = undefined
          this.form.issueType = undefined
          // this.showRectification=true
        } else {
          // this.showRectification=false
        }
      },
      changeIssue(e) { //下达方式
        if (e == 0) {} else {
          this.form.rectificationDeptId = undefined
          this.form.rectificationPeoId = undefined
        }
      },
    }
  };
</script>
<style scoped>
  /deep/ .el-dialog__body {
    padding-top: 0;
  }

  /deep/ .el-form-item {
    margin: 6px 6px 12px 6px;
  }
</style>
